<template>
  <!-- 主页轮播图 -->
  <div class="swipeBox">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="b in bannerData"
        @click="playSwipeItem(b.song)"
        :key="b.pic"
        class="v_img"
      >
        <van-image :src="b.pic" lazy-load />
        <div class="banner_label">{{ b.typeTitle }}</div>
      </van-swipe-item>
    </van-swipe>
  </div>
  <!-- 主页轮播图 -->
</template>

<script>
import { Swipe, SwipeItem, Image as VanImage } from "vant";
export default {
  name: "Swiper",
  data() {
    return {
      bannerData: [],
    };
  },
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [VanImage.name]: VanImage,
  },
  created() {
    this.loadSwipe();
  },
  methods: {
    //创建主组件时触发  ---  加载轮播图数据
    loadSwipe() {
      //获取歌单详情
      this.$http.get("/banner?type=1").then((data) => {
        //得到一个数组，里面是对象数据
        console.log(data.data.banners);
        //pic-图片地址 song.name-名 typeTitle-右下角文字 titleColor-右下角文字的颜色
        //song.id - 歌id
        this.bannerData = data.data.banners;
      });
    },
    //点击轮播图子项时触发  ---  播放点中的轮播图对应的音乐
    playSwipeItem(song) {
      if (song) {
        this.$root.musicStore.musicID = song.id;
        this.$root.musicStore.currentMusic = song;
        console.log(
          "当前播放音乐的信息==>",
          this.$root.musicStore.currentMusic
        );
        // this.$root.musicStore.musicList.unshift(song)//把当前歌曲放进播放列表的末尾
        //处理去重问题
        let newArr = this.$root.musicStore.musicList;
        let find = false;
        for (let n of newArr) {
          if (n.id == song.id) {
            find = true;
          }
        }
        if (!find) {
          this.$root.musicStore.musicList.push(song);
        }
        //把当前歌曲列表全部加入播放歌单列表
        this.$emit("add-list");
      } else {
        console.log("此为广告轮播...暂无此歌曲源...");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.swipeBox {
  padding: 4px;
  overflow: hidden;
  .my-swipe {
    border-radius: 7px 7px 0px 0px;
    .van-swipe-item {
      color: #fff;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .v_img {
      position: relative;
      .banner_label {
        border-radius: 10px 0px 0px 0px;
        padding: 3px 5px;
        background: red;
        font-size: 13px;
        position: absolute;
        bottom: 4px;
        right: 0px;
      }
    }
  }
}
</style>